<template>
  <Scroll class='search-result suggest'
          ref="scroll"
          :pullUpLoad='pullUpLoad'
          @pullingUp='pullingUp'>
    <ul class="suggest-list">
      <li @click="selectItem(item,i)"
          class="suggest-item"
          v-for="(item,i) in result"
          :key='i'>
        <div class="icon">
          <i class="icon-music"></i>
        </div>
        <div class="name">
          <p class="text"
             v-html="item.filename"></p>
        </div>
      </li>
      <loading v-show='hasMore'
               title=""
               :size='25'></loading>
      <li class="suggest-item text-center"
          v-show='loadEnd'>
        <div class="name">
          <p class="text">已加载完全部 !</p>
        </div>
      </li>
      <li class="text-center noResult"
          v-show='noResult'>
        <i class='noResult-icon'></i>
        <div class="name">
          <p class="text">没有搜索到相关内容 ~</p>
        </div>
      </li>
    </ul>
  </Scroll>
</template>

<script>
import { kougoSearch } from 'api/search'
import { localMixin, playMiniMixin } from 'common/js/mixin'
import { createSongKuGou } from 'common/js/song'
import Loading from 'base/loading/loading'
import Scroll from 'base/scroll/scroll'
const n = 20
// 搜索结果
export default {
  mixins: [localMixin, playMiniMixin],
  props: {
    query: {
      type: String,
      default: ''
    },
    showSinger: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      page: 1,
      hasMore: false,
      result: [],
      // 上拉到底加载
      pullUpLoad: {
        threshold: 50
      },
      // 总数
      total: 0,
      // 没有数据的标识
      loadEnd: false,
      // 没有搜索到相关内容
      noResult: false
    }
  },
  methods: {
    // 到底加载
    pullingUp () {
      console.log('到底加载')
      if (!this.loadEnd && !this.hasMore) this._add()
    },
    async _add () {
      this.hasMore = true
      this.page += 1
      const res = await kougoSearch(this.query, this.page, this.showSinger, n)
      // console.log(res)
      this.result = await this._normalSong(res.data.info, this.result.length)
      // 没有数据了
      if (this.page * n >= this.total) this.loadEnd = true
      this.hasMore = false
      // 重置Scroll组件
      this.$nextTick(() => {
        this.refresh()
        this.$refs.scroll.finishPullUp()
      })
    },
    selectItem (item, index) {
      // console.log(this.songs)
      if (this.currentSong) {
        // 如果当前是随机播放列表 通过id来找到index
        this.next(item.id)
      } else {
        this.openP({
          list: this.result,
          index
        })
      }
    },
    async _search () {
      // 再次搜索
      this.initSearchStatus()
      if (this.result.length > 0) {
        this._normal()
      }
      const res = await kougoSearch(this.query, this.page, this.showSinger, n)
      this.total = res.data.total
      this.result = await this._normalSong(res.data.info)
      if (this.page * n >= this.total) this.noResult = true
      // const song = await getSong()
      // const lyric = await getLyric()
      // if (typeof res === 'string') {
      //   console.log(this.handleDataString(res))
      // }
      // 设置搜索历史
      this.setLocalStorage('history_search', this.query)
      this.hasMore = false
      console.log(this.result)
    },
    // 第一页数据 / 翻页 添数据
    async _normalSong (res, length = 0) {
      let ret = length ? this.result : []
      for (let i = 0; i < res.length; i++) {
        let obj = await createSongKuGou(res[i].hash, length + i)
        ret.push(obj)
      }
      return ret
    },
    initSearchStatus () {
      this.hasMore = true
      this.page = 1
      this.loadEnd = false
      this.noResult = false
    },
    // 清空
    _normal () {
      this.result = []
      this.$refs.scroll.scrollTo(0, 0)
    },
    // 加载更多时 累加index
    handleDataString (ret) {
      var reg = /^\w+\(({[^()]+})\)$/
      var matches = ret.match(reg)
      console.log(matches)
      if (matches) {
        return JSON.parse(matches[1])
      }
    },
    refresh () {
      this.$refs.scroll.refresh()
    }
  },
  watch: {
    query (newQuery) {
      if (newQuery) {
      } else {
        // 清空之前搜索数据
        this._normal()
      }
    }
  },
  components: {
    Loading,
    Scroll
  }
}
</script>

<style scoped lang='stylus'  rel='stylesheet/stylus'>
@import '~common/stylus/variable'
@import '~common/stylus/mixin'
.suggest
  height 100%
  overflow hidden
  .suggest-list
    padding 0 30px
    .suggest-item
      display flex
      align-items center
      padding-bottom 20px
    .noResult-icon
      display inline-block
      margin-bottom 20px
      width 106px
      height 105px
      background-size cover
      bg('search_null')
    .noResult
      margin-top 100px
    .icon
      flex 0 0 30px
      width 30px
      [class^='icon-']
        font-size 14px
        color $color-text-d
    .name
      flex 1
      font-size $font-size-medium
      color $color-text-d
      overflow hidden
      .text
        no-wrap()
</style>